{% block sw_media_library %}
<div class="sw-media-library">
    {% block sw_media_library_display_options %}
    <div class="sw-media-library__options-container">
        <sw-media-display-options
            class="sw-media-library__display-options"
            :presentation="presentation"
            :sorting="sorting"
            :hide-presentation="compact"
            :disabled="disabled"
            @media-presentation-change="presentation = $event"
            @media-sorting-change="sorting = $event"
        />

        <sw-extension-teaser-popover
            position-identifier="sw-media-generate-image-button"
        />

        {% block sw_media_index_create_folder %}
        <mt-button
            v-if="editable || allowCreateFolder"
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('media.creator'),
                showOnDisabledElements: true
            }"
            :disabled="!acl.can('media.creator') || disabled"
            class="sw-media-index__create-folder-action"
            ghost
            size="small"
            variant="secondary"
            @click="createFolder"
        >
            {{ $tc('sw-media.index.buttonCreateFolder') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_library_scroll_container %}
    <div
        ref="scrollContainer"
        class="sw-media-library__scroll-container"
    >
        <div class="sw-media-library__scroll-content">

            {% block sw_media_library_media_grid %}
            <sw-media-grid
                ref="mediaGrid"
                class="sw-media-library_media-grid"
                :presentation="gridPresentation"
                @media-grid-selection-clear="clearSelection"
            >

                {% block sw_media_library_back_to_parent_item %}
                <sw-media-folder-item
                    v-if="parentFolder && (!isLoading || selectableItems.length > 0)"
                    :allow-edit="acl.can('media.editor')"
                    :allow-delete="acl.can('media.deleter')"
                    :disabled="disabled"
                    class="sw-media-library__parent-folder"
                    :item="parentFolder"
                    :show-selection-indicator="false"
                    :show-context-menu-button="false"
                    :allow-multi-select="allowMultiSelect"
                    :is-list="showItemsAsList"
                    is-parent
                    @media-item-click="goToParentFolder"
                />
                {% endblock %}

                {% block sw_media_library_media_item_list %}
                <sw-media-entity-mapper
                    v-for="(gridItem, index) in selectableItems"
                    :key="gridItem.getEntityName() + '_' + gridItem.id"
                    :class="`sw-media-grid-item__item--${index}`"
                    :item="gridItem"
                    :disabled="disabled"
                    :allow-edit="acl.can('media.editor')"
                    :allow-delete="acl.can('media.deleter')"
                    :selected="showItemSelected(gridItem)"
                    :show-selection-indicator="isListSelect"
                    :show-context-menu-button="editable"
                    :is-list="showItemsAsList"
                    :editable="editable"
                    :allow-multi-select="allowMultiSelect"
                    @media-item-replaced="refreshList"
                    @media-item-delete="refreshList"
                    @media-folder-delete="refreshList"
                    @media-folder-remove="removeNewFolder"
                    @media-folder-dissolve="refreshList"
                    @media-folder-move="refreshList"
                    @media-folder-changed="refreshList"
                    v-on="mediaItemSelectionHandler"
                />
                {% endblock %}

                <template v-if="isLoading">
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                    <sw-skeleton variant="media" />
                </template>

                {% block sw_media_library_load_more_button %}
                <mt-button
                    v-if="showLoadMoreButton"
                    class="sw-media-library__load-more-button"
                    variant="secondary"
                    @click="loadNextItems"
                >
                    {{ $tc('sw-media.mediaLibrary.labelButtonLoadMore') }}
                </mt-button>
                {% endblock %}
            </sw-media-grid>
            {% endblock %}
        </div>
    </div>
    {% endblock %}

    {% block sw_media_library_empty_state %}
    <mt-empty-state
        v-if="shouldDisplayEmptyState"
        class="sw-media-library__empty-state"
        :centered="true"
        :icon="$route.meta.$module.icon"
        :headline="$tc('sw-empty-state.messageNoResultTitle')"
        :link-text="$t('sw-empty-state.messageNoResultLink')"
        :link-href="$router.resolve({ name: 'sw.profile.index.searchPreferences' }).href"
    />
    {% endblock %}
</div>
{% endblock %}
